<!DOCTYPE html>
<!-- 瀑布流 -->
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>瀑布流</title>
    <style>
        .item {
            position: absolute;
            top: 5px;
            left: 5px;
            right: 5px;
            bottom: 5px;
            font-size: 1.2em;
            color: rgb(0, 158, 107);

        }
    </style>
</head>

<body>
    <div id="app">
        <!-- @reflowed= 触发说明渲染结束 -->
        <waterfall :line-gap="300" :min-line-gap="150" :watch="items" @reflowed="isBusy = true">
            <!-- each component is wrapped by a waterfall slot -->
            <waterfall-slot v-for="(item, index) in items" :width="item.width" :height="item.height" :order="index"
                :key="item.id">
                <!--
                your component
              -->
                <div class="item" :style="item.style" :index="item.index" @click='handler(item.index)'
                    move-class="item-move">
                    {{item.index}}
                </div>
            </waterfall-slot>
        </waterfall>
    </div>

</body>
<script src="../vue/vue.min.js"></script>
<script src="./vue-waterfall.min.js"></script>

<script>
    var ItemFactory = (function () {
        var lastIndex = 0;

        function generateRandomItems(count) {
            var items = [],
                i;
            for (i = 0; i < count; i++) {
                items[i] = {
                    index: lastIndex++,
                    style: {
                        background: getRandomColor(),
                    },
                    width: 100 + ~~(Math.random() * 50),
                    height: 100 + ~~(Math.random() * 50),
                };
            }
            // console.log(items);/
            return items;
        }

        function getRandomColor() {
            var colors = [
                "rgba(21,174,103,.5)",
                "rgba(245,163,59,.5)",
                "rgba(255,230,135,.5)",
                "rgba(194,217,78,.5)",
                "rgba(195,123,177,.5)",
                "rgba(125,205,244,.5)",
            ];
            return colors[~~(Math.random() * colors.length)];
        }

        return {
            get: generateRandomItems,
        };
    })();

    var vm = new Vue({
        el: '#app',
        components: {
            'waterfall': Waterfall.waterfall,
            'waterfall-slot': Waterfall.waterfallSlot
        },
        data() {
            return {
                items: ItemFactory.get(10), // 渲染的数据
                isBusy: true // true为渲染结束
            }
        },
        mounted() {
            let _this = this
            // 监听触底滚动事件
            window.addEventListener("scroll", function () {
                var scrollTop =
                    document.documentElement.scrollTop || document.body.scrollTop;
                if (scrollTop + window.innerHeight >= document.body.clientHeight) {
                    _this.addItems();
                }
            });
        },

        methods: {
            addItems() {
                console.log('触底le');
                // 条件: 
                if (this.isBusy) {
                    this.isBusy = false
                    this.items.push.apply(this.items, ItemFactory.get(10))
                    // this.items = this.items.concat(ItemFactory.get(5))
                    // this.items.push(...ItemFactory.get(10))
                }
            },

            // 处理点击事件
            handler(index) {
                // this.items.splice(index, 1);

                this.items = this.items.filter(e => e.index !== index)
            }
        }
    })
</script>

</html>

<!-- 
waterfall 组件 属性

Name	                        Default	          Description
line	                           v	                  v or h . Line direction. = 值有 v和h  分别表示排列位置 h等高 v等宽
*line-gap	                       -	                  Required. The standard space (px) between lines. 必填的, 间距 不用写单位
min-line-gap	                  = line-gap	          The minimal space between lines. 两行之间的最小间距。默认是等于上面填的值
max-line-gap	                  = line-gap	          The maximal space between lines.
single-max-width	              = max-line-gap	      The maximal width of slot which is single in horizontal direction. 在水平方向上单个槽的最大宽度。
fixed-height	                  false	                Fix slot height when line = v .   line值=v时 固定槽高度。
grow	                           -	                  Number Array. Slot flex grow factors in horizontal direction when line = v . Ignore *-gap .
align	                          left	                left or right or center . Alignment. 左或右或中间。对齐
auto-resize	                    true	                Reflow when window size changes. 窗口大小更改时回流(重绘)
interval	                      200	                  The minimal time interval (ms) between reflow actions.回流动作之间的最小时间间隔（ms）。
*watch	                          {}	                  Watch something, reflow when it changes.监听数据,变化的时候回流(重绘)
 -->

<!-- 
  aterfall-slot 组件 属性

  Name	        Default	              Description
  *width	          -	                      Required. The width of slot.
  *height	        -	                      Required. The height of slot.
  *order	          0	                      The order of slot, often be set to index in v-for .槽位的顺序，通常设置为v-for中的索引。
  *key	            ''	                    The unique identification of slot, required for transition.转换所需的插槽的唯一标识。
  move-class	    -	                      Class for transition. see vue-animated-list .  变化的时候会添加上这个类名

  -->